<template>
    <div :class="`tech-shop-bag ${mode}`">
        <div class="bag-all-action">
            <Checkbox class="black-element-style title-color">
                <div class="checkbox-content" @click="toggleBagAll"  v-if="isEdit">
                    <MiniIcon v-if="isAll" class="check-icon" name="checkfill" :size="20" />
                    <MiniIcon v-else class="check-icon" name="checkcircle" :mode="mode" theme="#7D7D83" :styleMode="styleMode" :size="20" />
                    全选
                </div>
            </Checkbox>
            <div class="right-action">
                <div v-if="!isEdit" class="edit-action title-color" @click="editBagList">编辑</div>
                <div v-else class="edit-complete-action" @click="editComplete">完成</div>
            </div>
        </div>
        <div class="store-list-bag">
            <template v-for="(item, index) in bagList" >
                <BagStoreItem :key="index" :storeData="item" :storeIndex="index" />
            </template>
        </div>
        <BagHot v-if="bagHotList.length > 0" :isBrand="true" :list="bagHotList" @refresh="refreshBagData" />
        <Footer :isHaveBar="true" />
        <BagActionBar :isEdit="isEdit" :price="(totalPrice / 100).toFixed(2)" :discountPrice="0" @delete="deleteSelectItem" @ensure="settlementSelectItem" />
        <LocationFail ref="locationFail" @reAction="reLocation" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Checkbox, CheckboxGroup } from 'vant';
import { MiniIcon } from '@components/base';
import { Footer } from '@components/biz';
import BagItem from './bag/BagItem';
import BagStoreItem from './bag/BagStoreItem';
import BagHot from './bag/BagHot';
import BagActionBar from './bag/BagActionBar';
import { LocationFail } from '@components/biz';

import { setTitle, redirectTo, repalceTo } from '@common/utils';
import { getUiMode, getUiTheme, getUiStyleMode, getBrandNameCookie, getBrandOperationMode } from '@biztools/info';
import { isSelectAll, calcBagTotalPrice, getSelectStoreListData, bagDataToReviewData, getSelectProductList } from '@biztools/shopBag';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
import { platformTruth, getLocation } from '@common/environment';
import { SHOP_MODE_TYPE } from '@constants/shop';
import EventBus from '@common/eventBus';
import { Tip, TipError, TipSuccess } from '@common/tip';
import logger from '@common/logger';

export default {
    name: 'ShopBag', // 购物袋
    components: {
        BagItem,
        Checkbox,
        CheckboxGroup,
        MiniIcon,
        BagStoreItem,
        BagHot,
        BagActionBar,
        Footer,
        LocationFail,
    },
    data() {
        return {
            isNoUse: false,
            isEdit: false, // 是否是编辑
            editSelectList: [], // 编辑选中的元素
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    computed: {
        ...mapState({
            bagList: state => state.shopBag.bagList,
            bagHotList: state => state.shopBag.bagHotList,
            addressInfo: state => state.shopAddress.addressInfo,
            shopInfoData: state => state.shop.shopInfoData,
        }),
        // 是否全选
        isAll() {
            return isSelectAll(this.bagList);
        },
        // 根据选择动态计算价格
        totalPrice() {
            return calcBagTotalPrice(this.bagList);
        },
        isBrandMode() {
            return getBrandOperationMode() === SHOP_MODE_TYPE.brand;
        },
    },
    async created() {
        setTitle('购物袋');
        // await this.getLocationInfo();
        EventBus.$on('RefreshBagData', async () => {
            logger.debugger('ShopBag => 执行刷新购物车信息');
            await this.refreshBagData();
        });
    },
    async mounted() {
        await this.refreshBagData();
        // 获取热门推荐数据
        await this.getShopBagHotData();
    },
    methods: {
        ...mapActions([
            'setOrderReviewList',

            'getOnlineShopCartData',
            'getOnlineShopCartInfo',
            'getShopBagHotData',
            'matchShopAddress',
            'toggleBagAll',
            'onlyChagneReviewListData',
            'changeInvalidReviewList',
            'deleteOnlineShopBagData',
        ]),
        editBagList() {
            this.isEdit = true;
        },
        editComplete() {
            this.isEdit = false;
        },
        // 重新刷新地址，去除token等信息
        reLocation() {
            repalceTo('shop/bag');
        },
        async refreshBagData() {
            // 获取购物车数据
            await this.getOnlineShopCartData();
        },
        async deleteSelectItem() {
            // 删除选中的物品
            const selectList = getSelectProductList(this.bagList);
            logger.debugger('选择的列表为 => ', selectList);
            if (selectList.length > 0) {
                const targetList = selectList.map(item => {
                    return {
                        ...item,
                        quantity: 0,
                    };
                });
                const flag = await this.deleteOnlineShopBagData(targetList);
                if (flag) {
                    TipSuccess('删除成功!');
                } else {
                    TipError('删除失败，请重试!');
                }
            } else {
                Tip('请先选择商品');
            }
        },
        // 结算
        settlementSelectItem() {
            const selectList = getSelectStoreListData(this.bagList);
            logger.debugger('Bag => 最终选中的下单数据为', selectList);
            if (selectList.length > 0) {
                const reviewList = bagDataToReviewData(selectList);
                this.setOrderReviewList(reviewList);
                redirectTo('shop/review');
            } else {
                TipError('请先选择商品');
            }
        },
        // 计算选中的商品的价格
        calcAmountPrice() {},
    },
};
</script>

<style lang="less">
.tech-shop-bag {
    .mode-white();
    &.black {
        .bag-all-action,
        .store-list-bag {
            background-color: @black-bg-color;
        }
    }
    .bag-all-action {
        height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .p-h(@shop-gap-md);
        border-bottom: 1px solid rgba(125,125,131,0.2);
        background-color: @white;
        .right-action {
            font-size: @font-size;
            font-weight: 500;
            color: @text-color;
            .edit-complete-action {
                color: @red;
            }
        }
    }
    .checkbox-content {
        .flex();
        align-items: center;
        .check-icon {
            .m-r(@shop-gap);
        }
    }
    .van-checkbox {
        .van-checkbox__icon {
            display: none;
        }
        .van-checkbox__label {
            .m-l(0);
        }
    }
}
</style>
